iT邦幫忙

2024 iThome 鐵人賽

DAY 13
1
Mobile Development

從零開始學React Native系列 第 13

【從零開始學React Native】12. 關於React Native的本地存儲

  • 分享至 

  • xImage
  •  

有時候,我們想要存儲一些資料在使用者的裝置上來做使用。在Web App中,我們可以使用localStorage和Cookie來將一些資料存儲在瀏覽器上。但在React Native這樣的原生應用中,我們有不同的選擇。這裡簡單介紹React Native中幾種常用的本地存儲方案。

1. AsyncStorage(不推薦)

AsyncStorage是React Native提供的簡單、異步的鍵值存儲系統,類似於Web開發中的localStorage。(但是被removed了,React Native推薦使用其他的第三方套件)

優點:

  • 使用簡單,API友好
  • 適合存儲少量簡單數據

缺點:

  • 不適合大量或複雜數據
  • 無加密機制

使用場景:

  • 存儲用戶偏好設置,如主題選擇、語言設置等
  • 緩存非敏感的API響應數據
  • 保存應用的一些狀態信息,如上次訪問的頁面

2. MMKV

GitHub - mrousavy/react-native-mmkv
MMKV是一個高效的跨平台 key-value 存儲框架,在 React Native 中也有對應的套件

優點:

  • 性能極高,比 AsyncStorage 快很多
  • 支持multi-process concurrency
  • 支持加密
  • 可以存儲複雜的數據結構(通過 JSON 序列化)
    缺點:
  • 需要額外安裝和配置
    使用場景:
  • 需要高頻讀寫的數據,如用戶設置、應用狀態等
  • 需要存儲較大量的 key-value 數據
  • 對性能要求較高的應用

3. SQLite

SQLite是輕量級關係型數據庫,適合存儲大量結構化數據。

優點:

  • 支持SQL查詢
  • 可處理大量數據

缺點:

  • 需要編寫SQL或使用ORM

使用場景:

  • 需要進行複雜查詢的數據密集型應用
  • 需要存儲大量結構化數據的應用
  • 需要進行本地數據分析的應用

4. 文件系統

React Native提供了訪問設備文件系統的API。

優點:

  • 可存儲大文件
  • 靈活性高

缺點:

  • 需手動管理文件操作
  • 不適合結構化數據

使用場景:

  • 需要存儲和管理大型媒體文件的應用,如照片編輯器或視頻播放器
  • 需要處理文檔的應用,如PDF閱讀器或文件管理器

5. Keychain (iOS) / Shared Preferences (Android)

用於安全存儲敏感信息。

優點:

  • 提供加密存儲
  • 系統級安全保護

缺點:

  • 僅適合小量數據

使用場景:

  • 存儲用戶的登錄憑證,如訪問令牌或刷新令牌
  • 存儲需要高度安全性的個人信息,如信用卡標記

結論

React Native提供了多種本地存儲方案,每種都有其適用場景。與Web App中的localStorage和Cookie不同,這些方案為移動應用提供了更多樣化和強大的存儲選項。接下來我們會在我們的專案使用這些存儲方式,來存儲我們本地的資料。


上一篇
【從零開始學React Native】11. 創建Todo Tracker——調整新建頁面
下一篇
【從零開始學React Native】13. 創建Todo Tracker——存儲資料在本地
系列文
從零開始學React Native20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言